<template>
	<view class="container">
		<yxyl-audio
			id="audioContainer"
			ref="audioContainer"
			:hasText="hasText"
			:text="text"
			:src="playSrc"
			:title="title"
			@Prev="Prev"
			@Next="Next"
			@End="End"
			@changeStatus="changeStatus"
			@onPlay="onPlay"
			@reportPlayTime="reportPlayTime"
			:itemChange="itemChange"
			:logo="logo"
		></yxyl-audio>
		<yxyl-album-tabs :tabs="tabs" :top="top" :bottom="bottom">
			<yxyl-album-img-list slot="slot_1" :imageList="albumImageList"></yxyl-album-img-list>
			<yxyl-album-item-list :isPlaying="isPlaying" @change="change" slot="slot_2" :itemList="albumItemList" :currentIndex="currentIndex"></yxyl-album-item-list>
		</yxyl-album-tabs>
		<view class="footer"><yxyl-album-bottom :canDiscuss="canDiscuss" :discussGroupId="discussGroupId" :labelId="labelId"></yxyl-album-bottom></view>
		
		<yxyl-fab @trigger="goFavourite" bottom="280rpx" customColor="#fff" class="star">
			<image v-if="isFavorite" src="../../static/icon/favourite.png" mode="widthFix"></image>
			<image v-else src="../../static/icon/un-favourite.png" mode="widthFix"></image>
		</yxyl-fab>
		<yxyl-fab @trigger="gotoHome" bottom="160rpx" customColor="#fff"><image src="https://img-ali.cnyanglao.com/goToHome.png-w100" mode="widthFix"></image></yxyl-fab>
	</view>
</template>

<script>
import yxylAudio from '@/components/yxyl-audio/yxyl-audio.vue';
import yxylAlbumTabs from '@/components/yxyl-album-tabs/yxyl-album-tabs.vue';
import yxylAlbumImgList from '@/components/yxyl-album-tabs/yxyl-album-imgList.vue';
import yxylAlbumItemList from '@/components/yxyl-album-tabs/yxyl-album-itemList.vue';
import yxylAlbumBottom from '@/components/yxyl-album-bottom/yxyl-album-bottom.vue';
import yxylFab from '@/components/yxyl-fab/yxyl-fab.vue';
import { getAlbumInfo, getAlbumItemUrl, reportPlayTime } from '@/api/album.js';

export default {
	components: { yxylAudio, yxylAlbumTabs, yxylAlbumImgList, yxylAlbumItemList, yxylFab, yxylAlbumBottom },
	data() {
		return {
			tabs: [
				{
					name: '详情'
				},
				{
					name: '目录'
				}
			],
			top: 0,
			albumImageList: [],
			albumItemList: [],
			currentIndex: -1,
			playSrc: '',
			isPlaying: false,
			title: '',
			hasText: false,
			text: '',
			logo: '',
			prevSrc: '',
			canComment: false,
			discussGroupId: '',
			labelId: '',
			albumId:'',
			// 是否收藏
			isFavorite: false,
			// 上报次数
			reportIndex: 1,
			// 点击列表切歌
			itemChange: 0
		};
	},
	onUnload() {
		this.$refs.audioContainer.Pause();
		this.isPlaying = false;
	},
	onLoad(e) {
		this.albumId=e.AlbumId;
		var that = this;
		var result = getAlbumInfo(e.AlbumId);

		if (e.hasText) {
			this.hasText = e.hasText;
		}
		result.then(res => {
			that.albumImageList = res.contents;
			that.albumItemList = res.items;
			that.logo = res.albumCoverImage;
			that.canComment = this.$store.state.user.canDiscuss && res.canComment;
			that.discussGroupId = res.discussGroupId;
			that.labelId = res.labelId;
			that.isFavorite = res.isFavorite;
			if (res.currentIndex) {
				that.currentIndex = res.currentIndex;
			} else {
				that.currentIndex = 0;
			}
			if (!res.contents || res.contents.length == 0) {
				that.tabs[0].disabled = true;
			}
			uni.setNavigationBarTitle({
				title: res.albumName
			});
			// #ifdef H5
			that.$wechat.share({
				link: that.$handlerAppMessagePath()
			});
			// #endif

			uni.$on('resetAlbum', function() {
				that.currentIndex = 0;
			});
		});
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	watch: {
		currentIndex(value) {
			var currentId = this.albumItemList[value].id;
			this.bindAlbumItemUrl(currentId, 0);
		}
	},
	computed: {
		videoHeight: () => {
			const res = uni.getSystemInfoSync();
			return (res.windowWidth * 9) / 16 + 'px';
		},
		bottom: () => {
			const res = uni.getSystemInfoSync();
			return (res.windowWidth * 80) / 750;
		},
		canDiscuss() {
			return this.$store.state.user.canDiscuss && this.canComment && (this.labelId || this.discussGroupId);
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#audioContainer')
			.boundingClientRect(data => {
				this.top = data.height;
			})
			.exec();
	},
	methods: {
		gotoHome() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		change(e) {
			this.currentIndex = e;
			this.itemChange = e;
		},
		Prev() {
			if (this.currentIndex > 0) {
				this.currentIndex--;
			}
		},
		Next() {
			if (this.currentIndex < this.albumItemList.length - 1) {
				this.currentIndex++;
			}
		},
		End(e) {
			if (!e.isCircle) {
				if (this.currentIndex < this.albumItemList.length - 1) {
					this.currentIndex++;
				} else {
					this.currentIndex = 0;
				}
			}
		},
		changeStatus(e) {
			this.isPlaying = e.playing;
		},
		onPlay() {
			this.isPlaying = true;
		},
		reportPlayTime(e) {
			var duration=Math.ceil(e.duration/60);
			console.info('===REPORT DATA===')
			console.table({
				duration_before_format: e.duration,
				duration: duration,
				reportIndex: this.reportIndex,
				albumId: this.albumId,
				audioId: this.albumItemList[this.currentIndex].id
			})
			reportPlayTime(this.reportIndex, this.albumId,this.albumItemList[this.currentIndex].id,duration,0);
			this.reportIndex++
		},
		bindAlbumItemUrl(AlbumItemId, Pixel) {
			var that = this;
			if (AlbumItemId) {
				var result = getAlbumItemUrl(AlbumItemId, Pixel);
				result.then(res => {
					if (res) {
						that.playSrc = res.url;
						that.text = res.contentsText;
						that.prevSrc = res.prevUrl;
						var currentItem = that.albumItemList[that.currentIndex];
						if (currentItem) {
							that.title = currentItem.itemTitle;
						}
						if (res.contents && res.contents.length > 0) {
							that.albumImageList = res.contents;
							that.tabs[0].disabled = false;
						} else {
							if (that.tempAlbumImagesLIst && that.tempAlbumImagesLIst.length > 0) {
								that.albumImageList = that.tempAlbumImagesLIst;
								that.tabs[0].disabled = false;
							} else that.tabs[0].disabled = true;
						}
					}
				});
			}
		},
		// 收藏,取消收藏
		goFavourite(e){
			this.$http.request({
				url: 'api/Album/Favorite',
				method: 'PUT',
				showLoading: false,
				data: {
					Id: this.albumId
				}
			}).then(resp => {
				this.isFavorite = !this.isFavorite
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 80rpx;
	border-top: 1px solid #c0c0c0;
	z-index: 9999;
}
</style>
